﻿<div [@routerTransition] id="TenantDashboard">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>导管制造</span>
                </h3>
                <span class="m-section__sub">
                    情况汇总
                </span>
            </div>

        </div>
    </div>

    <div class="m-content">

        <div class="m-portlet">
            <div class="m-portlet__body  m-portlet__body--no-padding">
                <div class="row m-row--no-padding m-row--col-separator-xl">
                    <div class="col-md-12 col-lg-6 col-xl-3">
                        <div class="m-widget24">
                            <div class="m-widget24__item">
                                <h4 class="m-widget24__title">
                                    Total Profit
                                </h4>
                                <br>
                                <span class="m-widget24__desc">
                                    All Customs Value
                                </span>
                                <span class="m-widget24__stats m--font-brand">
                                    $ <span counto [step]="30"
                                            [duration]="1"
                                            [countFrom]="0"
                                            [countTo]="dashboardHeaderStats.totalProfit"
                                            (countoChange)="dashboardHeaderStats.totalProfitCounter = $event">
                                        {{dashboardHeaderStats.totalProfitCounter.toFixed(0)}}
                                    </span>
                                </span>
                                <div class="m--space-10"></div>
                                <div class="progress m-progress--sm">
                                    <div class="progress-bar m--bg-brand" role="progressbar" style="width: 76%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <span class="m-widget24__change">
                                    Change
                                </span>
                                <span class="m-widget24__number">
                                    <span class="counterup">{{dashboardHeaderStats.totalProfitChange}}</span>%
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-6 col-xl-3">
                        <div class="m-widget24">
                            <div class="m-widget24__item">
                                <h4 class="m-widget24__title">
                                    New Feedbacks
                                </h4>
                                <br>
                                <span class="m-widget24__desc">
                                    Customer Review
                                </span>
                                <span class="m-widget24__stats m--font-info"
                                      counto
                                      [step]="30"
                                      [duration]="1"
                                      [countFrom]="0"
                                      [countTo]="dashboardHeaderStats.newFeedbacks"
                                      (countoChange)="dashboardHeaderStats.newFeedbacksCounter = $event">
                                    {{dashboardHeaderStats.newFeedbacksCounter.toFixed(0)}}
                                </span>
                                <div class="m--space-10"></div>
                                <div class="progress m-progress--sm">
                                    <div class="progress-bar m--bg-info" role="progressbar" style="width: 85%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <span class="m-widget24__change">
                                    Change
                                </span>
                                <span class="m-widget24__number">
                                    <span class="counterup">{{dashboardHeaderStats.newFeedbacksChange}}</span>%
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-6 col-xl-3">
                        <div class="m-widget24">
                            <div class="m-widget24__item">
                                <h4 class="m-widget24__title">
                                    New Orders
                                </h4>
                                <br>
                                <span class="m-widget24__desc">
                                    Fresh Order Amount
                                </span>
                                <span class="m-widget24__stats m--font-info"
                                      counto
                                      [step]="30"
                                      [duration]="1"
                                      [countFrom]="0"
                                      [countTo]="dashboardHeaderStats.newOrders"
                                      (countoChange)="dashboardHeaderStats.newOrdersCounter = $event">
                                    {{dashboardHeaderStats.newOrdersCounter.toFixed(0)}}
                                </span>
                                <div class="m--space-10"></div>
                                <div class="progress m-progress--sm">
                                    <div class="progress-bar m--bg-danger" role="progressbar" style="width: 45%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <span class="m-widget24__change">
                                    Change
                                </span>
                                <span class="m-widget24__number">
                                    <span class="counterup">{{dashboardHeaderStats.newOrdersChange}}</span>%
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-6 col-xl-3">
                        <div class="m-widget24">
                            <div class="m-widget24__item">
                                <h4 class="m-widget24__title">
                                    New Users
                                </h4>
                                <br>
                                <span class="m-widget24__desc">
                                    Joined New User
                                </span>
                                <span class="m-widget24__stats m--font-info"
                                      counto
                                      [step]="30"
                                      [duration]="1"
                                      [countFrom]="0"
                                      [countTo]="dashboardHeaderStats.newUsers"
                                      (countoChange)="dashboardHeaderStats.newUsersCounter = $event">
                                    {{dashboardHeaderStats.newUsersCounter.toFixed(0)}}
                                </span>
                                <div class="m--space-10"></div>
                                <div class="progress m-progress--sm">
                                    <div class="progress-bar m--bg-success" role="progressbar" style="width: 57%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <span class="m-widget24__change">
                                    Change
                                </span>
                                <span class="m-widget24__number">
                                    <span class="counterup">{{dashboardHeaderStats.newUsersChange}}</span>%
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="m-portlet m-portlet--full-height sales-summary-chart">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    Sales Summary
                                </h3>
                            </div>
                        </div>
                        <div class="m-portlet__head-tools">
                            <div class="btn-group btn-group-devided" data-toggle="buttons">
                                <label class="btn m-btn--pill btn-secondary" [ngClass]="{'active': salesSummaryChart.selectedDatePeriod ==  appSalesSummaryDateInterval.Daily}" (click)="salesSummaryChart.reload(appSalesSummaryDateInterval.Daily)">
                                    <input type="radio"
                                           name="SalesSummaryDateInterval"
                                           class="toggle"
                                           [value]="appSalesSummaryDateInterval.Daily">
                                    {{"Daily" | localize}}
                                </label>
                                <label class="btn m-btn--pill btn-secondary" [ngClass]="{'active': salesSummaryChart.selectedDatePeriod ==  appSalesSummaryDateInterval.Weekly}" (click)="salesSummaryChart.reload(appSalesSummaryDateInterval.Weekly)">
                                    <input type="radio"
                                           name="SalesSummaryDateInterval"
                                           class="toggle"
                                           [value]="appSalesSummaryDateInterval.Weekly">
                                    {{"Weekly" | localize}}
                                </label>
                                <label class="btn m-btn--pill btn-secondary" [ngClass]="{'active': salesSummaryChart.selectedDatePeriod ==  appSalesSummaryDateInterval.Monthly}" (click)="salesSummaryChart.reload(appSalesSummaryDateInterval.Monthly)">
                                    <input type="radio"
                                           name="SalesSummaryDateInterval"
                                           class="toggle"
                                           [value]="appSalesSummaryDateInterval.Monthly">
                                    {{"Monthly" | localize}}
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body" [busyIf]="salesSummaryChart.loading" style="height: 260px; min-height: 260px;">
                        <div class="row list-separated">
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <h6>
                                    Total Sales
                                </h6>
                                <div>
                                    <span counto
                                          class="m--font-danger m--font-bolder"
                                          [step]="30"
                                          [duration]="1"
                                          [countFrom]="0"
                                          [countTo]="salesSummaryChart.totalSales"
                                          (countoChange)="salesSummaryChart.totalSalesCounter = $event">
                                        {{salesSummaryChart.totalSalesCounter.toFixed(0)}}
                                    </span>
                                    <span class="m--font-danger m--font-bolder">$</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <h6>
                                    Revenue
                                </h6>
                                <div class="uppercase font-hg font-green-haze">
                                    <span counto
                                          class="m--font-warning m--font-bolder"
                                          [step]="30"
                                          [duration]="1"
                                          [countFrom]="0"
                                          [countTo]="salesSummaryChart.revenue"
                                          (countoChange)="salesSummaryChart.revenuesCounter = $event">
                                        {{salesSummaryChart.revenuesCounter.toFixed(0)}}
                                    </span>
                                    <span class="m--font-warning m--font-bolder">$</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <h6>
                                    Expenses
                                </h6>
                                <div class="uppercase font-hg font-purple">
                                    <span counto
                                          class="m--font-info m--font-bolder"
                                          [step]="30"
                                          [duration]="1"
                                          [countFrom]="0"
                                          [countTo]="salesSummaryChart.expenses"
                                          (countoChange)="salesSummaryChart.expensesCounter = $event">
                                        {{salesSummaryChart.expensesCounter.toFixed(0)}}
                                    </span>
                                    <span class="m--font-success m--font-bolder">$</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <h6>
                                    Growth
                                </h6>
                                <div class="uppercase font-hg font-blue-sharp">
                                    <span counto
                                          class="m--font-info m--font-bolder"
                                          [step]="30"
                                          [duration]="1"
                                          [countFrom]="0"
                                          [countTo]="salesSummaryChart.growth"
                                          (countoChange)="salesSummaryChart.growthCounter = $event">
                                        {{salesSummaryChart.growthCounter.toFixed(0)}}
                                    </span>
                                    <span class="m--font-info m--font-bolder">$</span>
                                </div>
                            </div>
                        </div>
                        <ngx-charts-area-chart-stacked [results]="salesSummaryChart.data" [showXAxisLabel]="true" showYAxisLabel="true" [xAxis]="true" [yAxis]="true" [showGridLines]="false" [tooltipDisabled]="false">
                        </ngx-charts-area-chart-stacked>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-12">
                <div class="m-portlet m-portlet--full-height">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    Regional Stats
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div id="region_statistics_content">
                            <div class="table-responsive">
                                <!--begin::Table-->
                                <table class="table">
                                    <!--begin::Thead-->
                                    <thead>
                                        <tr>
                                            <td class="m-widget11__label">#</td>
                                            <td class="m-widget11__app">Country</td>
                                            <td class="m-widget11__sales">Sales</td>
                                            <td class="m-widget11__change">Change</td>
                                            <td class="m-widget11__price">Avg Price</td>
                                            <td class="m-widget11__total">Total</td>
                                        </tr>
                                    </thead>
                                    <!--end::Thead-->
                                    <!--begin::Tbody-->
                                    <tbody>
                                        <tr *ngFor="let stat of regionalStatsTable.stats; let index = index">
                                            <td>
                                                <label class="m-checkbox m-checkbox--solid m-checkbox--single m-checkbox--brand">
                                                    <input type="checkbox"><span></span>
                                                </label>
                                            </td>
                                            <td>{{stat.countryName}}</td>
                                            <td>{{stat.sales | currency}}</td>
                                            <td>
                                                <div class="m-widget11__chart" style="height:50px; width: 100px">
                                                    <ngx-charts-line-chart [results]="stat.changeData" [showGridLines]="false" [animations]="false" [tooltipDisabled]="true" [customColors]="regionalStatsTable.customColors" [curve]="regionalStatsTable.curve"></ngx-charts-line-chart>
                                                </div>
                                            </td>
                                            <td>{{stat.averagePrice | currency}}</td>
                                            <td>{{stat.totalPrice | currency}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="m-portlet m-portlet--full-height ">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    General Stats
                                </h3>
                            </div>
                        </div>
                        <div class="m-portlet__head-tools">
                            <a href="javascript:;" class="btn btn-primary" (click)="generalStatsPieChart.reload()">
                                <i class="fa fa-redo"></i> Reload
                            </a>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div class="row">
                            <ngx-charts-pie-grid [results]="generalStatsPieChart.data">
                            </ngx-charts-pie-grid>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-12">
                <div class="m-portlet m-portlet--full-height ">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    Daily Sales
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div class="row">
                            <div class="col-md-12">
                                <ngx-charts-bar-vertical [results]="dailySalesLineChart.chartData" [scheme]="dailySalesLineChart.scheme">
                                    <ng-template #tooltipTemplate let-model="model">
                                        <span>Day {{model.name}}</span>
                                        <br />
                                        <span>{{model.value}}</span>
                                    </ng-template>
                                </ngx-charts-bar-vertical>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6 col-xs-12 col-sm-12">
                <div class="m-portlet m-portlet--full-height ">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    Profit Share
                                    <small>
                                        Profit Share between customers
                                    </small>
                                </h3>
                            </div>
                        </div>
                        <div class="m-portlet__head-tools">
                            <ul class="m-portlet__nav">
                                <li class="m-portlet__nav-item m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" data-dropdown-toggle="hover" aria-expanded="true">
                                    <a href="javascript:;" class="m-portlet__nav-link m-dropdown__toggle dropdown-toggle btn btn--sm m-btn--pill btn-secondary m-btn m-btn--label-brand">
                                        Actions
                                    </a>
                                    <div class="m-dropdown__wrapper">
                                        <span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust" style="left: auto; right: 40.5px;"></span>
                                        <div class="m-dropdown__inner">
                                            <div class="m-dropdown__body">
                                                <div class="m-dropdown__content">
                                                    <ul class="m-nav">
                                                        <li class="m-nav__item">
                                                            <a href="javascript:;" class="m-nav__link">
                                                                <i class="m-nav__link-icon flaticon-share"></i>
                                                                <span class="m-nav__link-text">
                                                                    Action 1
                                                                </span>
                                                            </a>
                                                        </li>
                                                        <li class="m-nav__item">
                                                            <a href="javascript:;" class="m-nav__link">
                                                                <i class="m-nav__link-icon flaticon-chat-1"></i>
                                                                <span class="m-nav__link-text">
                                                                    Action 2
                                                                </span>
                                                            </a>
                                                        </li>
                                                        <li class="m-nav__item">
                                                            <a href="javascript:;" class="m-nav__link">
                                                                <i class="m-nav__link-icon flaticon-info"></i>
                                                                <span class="m-nav__link-text">
                                                                    Action 3
                                                                </span>
                                                            </a>
                                                        </li>
                                                        <li class="m-nav__item">
                                                            <a href="javascript:;" class="m-nav__link">
                                                                <i class="m-nav__link-icon flaticon-lifebuoy"></i>
                                                                <span class="m-nav__link-text">
                                                                    Action 4
                                                                </span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <!--begin:: Widgets/Profit Share-->
                        <div class="m-widget14">
                            <div class="row align-items-center">
                                <div class="col" style="height: 190px;">
                                    <ngx-charts-pie-chart [results]="profitSharePieChart.chartData" [doughnut]="true" [legend]="false" [labels]="false" [scheme]="profitSharePieChart.scheme" [animations]="false" [tooltipDisabled]="true"></ngx-charts-pie-chart>
                                </div>
                                <div class="col">
                                    <div class="m-widget14__legends" *ngIf="profitSharePieChart.chartData.length">
                                        <div class="m-widget14__legend">
                                            <span class="m-widget14__legend-bullet m--bg-accent"></span>
                                            <span class="m-widget14__legend-text">
                                                {{profitSharePieChart.chartData[0].value}}% Product Sales
                                            </span>
                                        </div>
                                        <div class="m-widget14__legend">
                                            <span class="m-widget14__legend-bullet m--bg-warning"></span>
                                            <span class="m-widget14__legend-text">
                                                {{profitSharePieChart.chartData[1].value}}% Online Courses
                                            </span>
                                        </div>
                                        <div class="m-widget14__legend">
                                            <span class="m-widget14__legend-bullet m--bg-brand"></span>
                                            <span class="m-widget14__legend-text">
                                                {{profitSharePieChart.chartData[2].value}}% Custom Development

                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--end:: Widgets/Profit Share-->
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-xs-12 col-sm-12">
                <div class="m-portlet m-portlet--full-height ">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    Member Activity
                                </h3>
                            </div>
                        </div>
                        <div class="m-portlet__head-tools">
                            <button (click)="memberActivityTable.reload()" class="btn btn-primary"><i class="fa fa-sync"></i> Refresh</button>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div class="table-scrollable table-scrollable-borderless">
                            <table class="table table-hover table-light">
                                <thead>
                                    <tr class="uppercase">
                                        <th colspan="2">
                                            MEMBER
                                        </th>
                                        <th>
                                            Earnings
                                        </th>
                                        <th>
                                            CASES
                                        </th>
                                        <th>
                                            CLOSED
                                        </th>
                                        <th>
                                            RATE
                                        </th>
                                    </tr>
                                </thead>
                                <tr *ngFor="let m of memberActivityTable.memberActivities; let index = index">
                                    <td class="fit">
                                        <img class="m--img-rounded m--marginless m--img-centered small-profile-pic" src="/assets/metronic/app/img/users/100_{{index + 1}}.jpg">
                                    </td>
                                    <td>
                                        <a href="javascript:;" class="primary-link">{{m.name}}</a>
                                    </td>
                                    <td>
                                        {{m.earnings}}
                                    </td>
                                    <td>
                                        {{m.cases}}
                                    </td>
                                    <td>
                                        {{m.closed}}
                                    </td>
                                    <td>
                                        <span class="bold font-green-haze">{{m.rate}}</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
